<template>
    <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
    import * as echarts from 'echarts'

    export default {
        props: {
            className: {
                type: String,
                default: 'chart',
            },
            id: {
                type: String,
                default: 'chart',
            },
            width: {
                type: String,
                default: '200px',
            },
            height: {
                type: String,
                default: '200px',
            },
            xData: {
                type: Array,
                // required: true
            },
            lineData: {
                type: Array,
                // required: true
            },
            legendData: {
                type: Array,
            },
            yAxisNameLeft: {
                type: String,
                default: '',
            },
        },
        data() {
            return {
                chart: null,
                rotate: 0,
            }
        },
        watch: {
            xData: {
                deep: true,
                handler() {
                    this.initChart()
                },
            },
            lineData: {
                deep: true,
                handler() {
                    this.initChart()
                },
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.chart = echarts.init(document.getElementById(this.id))
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                let intervalValue = 0
                this.rotate = 0
                if (this.xData.length > 12) {
                    this.rotate = 20
                    intervalValue = 1
                }
                let seriesName = this.legendData[0]
                let isShowTooltip = this.legendData.length > 1

                this.chart.setOption({
                    title: {
                        x: '20',
                        top: '20',
                        textStyle: {
                            color: '#fff',
                            fontSize: '22',
                        },
                        subtextStyle: {
                            color: '#90979c',
                            fontSize: '16',
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            textStyle: {
                                color: '#fff',
                            },
                        },
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        borderWidth: 0,
                        top: '15%',
                        bottom: '10%',
                        textStyle: {
                            color: '#fff',
                        },
                        container: true,
                        containLabel: true,
                    },
                    legend: {
                        show: true,
                        right: '100',
                        align: 'right',
                        textStyle: {
                            color: '#fff',
                        },
                        data: this.legendData,
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            axisLine: {
                                lineStyle: {
                                    color: '#90979c',
                                },
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            splitArea: {
                                show: false,
                            },
                            axisLabel: {
                                // interval: intervalValue,
                                // rotate: this.rotate,
                                color: '#D8F0FF99',
                            },
                            data: this.xData,
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: this.yAxisNameLeft,
                            nameTextStyle: {
                                color: '#D8F0FF99',
                            },
                            splitLine: {
                                show: false,
                            },
                            splitNumber: 6,
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                interval: 0,
                                color: '#D8F0FF99',
                            },
                            splitArea: {
                                show: false,
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#2c5a8f',
                                    type: 'dashed',
                                },
                            },
                        },
                    ],
                    series: this.lineData,
                })
            },
        },
    }
</script>

<style scoped></style>
